<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script type="text/javascript" src="/Public/Build/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="/Public/js/ellipsoidTrailMaterialProperty.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            skyAtmosphere: false,
            shouldAnimate: true,
            scene3DOnly: true,
        });
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(101.2665534, 30.1939345),
            point: {
                color: Cesium.Color.FIREBRICK,
                pixelSize: 6,
                outlineColor: Cesium.Color.DARKSLATEGREY,
                outlineWidth: 3,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },

        });


        const globe = viewer.scene.globe;
        let clippingPlanesEnabled = true;
        let edgeStylingEnabled = false;
        const position = Cesium.Cartographic.toCartesian(
            new Cesium.Cartographic.fromDegrees(101.2665534, 30.0939345, 2000)
        );
        const distance = 2000.0;
        const boundingSphere = new Cesium.BoundingSphere(position, distance);
        globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
            modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
            planes: [
                new Cesium.ClippingPlane(
                    new Cesium.Cartesian3(1.0, 0.0, 0.0),
                    distance
                ),
                new Cesium.ClippingPlane(
                    new Cesium.Cartesian3(-1.0, 0.0, 0.0),
                    distance
                ),
                new Cesium.ClippingPlane(
                    new Cesium.Cartesian3(0.0, 1.0, 0.0),
                    distance
                ),
                new Cesium.ClippingPlane(
                    new Cesium.Cartesian3(0.0, -1.0, 0.0),
                    distance
                ),
            ],
            unionClippingRegions: true,
            edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
            edgeColor: Cesium.Color.WHITE,
            enabled: clippingPlanesEnabled,
        });
        globe.backFaceCulling = false;
        globe.showSkirts = false;
        viewer.camera.viewBoundingSphere(
            boundingSphere,
            new Cesium.HeadingPitchRange(0.5, -0.5, boundingSphere.radius * 5.0)
        );
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    </script>
    </div>
</body>

</html>